<template>
  <div class="active-detail">
    <page-header title="优惠券领取"></page-header>
    <scroll class="detail-content" ref="detailScroll"  :class="{'loading': loading}"
            :pullup="true" :pulldown="true" @scrollToEnd="_more" @pullingDown="_refash">
      <ul class="list">
        <div v-for="item in list">
          <div class="pic">
            <img :src="item.bean.picture">
          </div>
          <div class="stamp stamp04">
            <div class="par">
              <p>{{item.bean.name}}</p>
              <sub class="sign">￥</sub>
              <span>{{item.bean.discount}}</span>
              <sub>优惠券</sub>
            </div>
            <div class="copy" @click="couponReceive(item)">领取</div>
            <i></i>
          </div>
          <div class="info">
            <div class="title-price">
              <p class="title">领取时间： {{item.bean.startTime}} - {{item.bean.endTime}}</p>
              <p class="title" v-if="item.bean.type == 1">可用活动： {{item.bean.activity.name}}</p>
            </div>
            <p class="des" v-html="item.bean.content"></p>
          </div>
        </div>
        <p class="nomore" v-if="nomore">没有更多</p>
      </ul>
    </scroll>
    <router-view></router-view>
  </div>
</template>

<script type="text/ecmascript-6">
  import PageHeader from 'components/page-header'
  import Scroll from 'components/scroll/scroll'
  import * as exampleApi from 'api/example'
  export default {
    components: {
      PageHeader,
      Scroll
    },
    data () {
      return {
        loading: false,
        list: [],
        page: 1,
        pageSize: 2,
        nomore: false
      }
    },
    mounted() {
      this._initData()
    },
    methods: {
      _more() {
        if (this.nomore) {
          return
        }
        this.page ++
        this._initData()
      },
      _refash() {
        this.page = 1
        this.loading = true
        this.nomore = false
        this._initData()
      },
      _initData() {
        exampleApi.modePost('/api/public/wz/activity/coulist', {
          pageNo: this.page,
          pageSize: this.pageSize
        }).then(
          res => {
            if (res.data.data) {
              if (res.data.data.rows.length < this.pageSize) {
                this.nomore = true
              }
              if (this.page === 1) {
                this.list = res.data.data.rows
              } else if (this.page > 1) {
                this.list = this.list.concat(res.data.data.rows)
              }
            }
          }
        )
      },
      couponReceive(item) {
        let humanId = sessionStorage.getItem('studentId')
        if (humanId === '-1') {
          alert('您尚未登录，请先登录')
          this.$router.push({path: '/login'})
          return
        }
        exampleApi.modePost('/api/public/wz/activity/couponReceive', {
          couponId: item.bean.id,
          humanId: humanId
        }).then(
          res => {
            alert(res.data.msg)
          }
        )
      }
    }
  }
</script>

<style lang="less" scoped>
  @import url('../common/css/coupon.css');
  .active-detail {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right:0;
    box-sizing: border-box;
    background-color: #e6e6e6;
    .detail-content{
      height:calc(~"100% - 84px");
      overflow: hidden;
      .list{
        position: relative;
        z-index: 2;
        display: flex;
        flex-direction: column;
        width: 100%;
      }
      .pic{
        position: relative;
        width: 100%;
        height: 340px;
        overflow: hidden;
        img{
           width: 100%;
           height: auto;
         }
      }
      .info{
        height: auto;
        padding: 26px;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        overflow: hidden;
        background-color: #fff;
        margin-bottom:15px;
      .title-price{
        justify-content: space-between;
        align-items: center;
        .title{
          font-size: 22px;
          color: #333333;
          font-weight: bold;
          line-height: 35px;
        }
      }
        .des{
          margin-top:15px;
          font-size: 22px;
          line-height: 34px;
          color: #999999;
        }
      }
      .nomore{
        font-size: 22px;
        color: #999999;
        text-align: center;
        padding-bottom: 20px;
      }
    }
    .detail-content.loading{
      &::after {
        display: block;
      }
    }
  }
</style>
